<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="home_banner">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in bannerList"
          :key="index"
          class="home_banner_item"
        >
          <img width="100%" :src="item.file_type + item.image_data" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="home_tabs">
      <div
        v-for="(item, index) in tabsList"
        :key="index"
        class="home_tabs_item"
      >
        <img class="home_tabs_img" :src="item.imgUrl" alt="">
        <div class="home_tabs_item_right">
          <div class="home_tabs_item_right_name">{{ item.desc_name }}</div>
          <div class="home_tabs_item_right_desc">{{ item.list_detail }}</div>
        </div>
      </div>
    </div>
    <hr>
    <div class="home_news">
      <div class="home_news_left">
        <img class="home_news_left_img" src="/images/nrh_message.png" alt="">
      </div>
      <div>
        <van-swipe class="home_news_swipe" :show-indicators="false" :autoplay="3000" vertical>
          <van-swipe-item v-for="(item,index) in messageList" :key="index">{{ item.message_text }}</van-swipe-item>
          <van-swipe-item v-if="messageList.length === 0">暂无数据</van-swipe-item>

        </van-swipe>
      </div>
      <div class="home_center" />
    </div>
    <div class="home_dsgs">

      <public-header title="大赛高手" />
    </div>
    <div class="home_conpontion">

      <div v-for="(item,index) in totalProfitList" :key="index" class="home_conpontion_item">
        <div class="home_conpontion_item_left">
          <div class="home_conpontion_item_left_avatar">头像</div>
          <div>{{ item.nickname }}</div>
        </div>

        <div class="home_conpontion_item_center">
          <div class="home_conpontion_item_center_total">{{ item.totalProfit }}</div>
          <div>累计收益率</div>
        </div>

        <div>订阅00</div>

      </div>

    </div>
    <div class="home_cencont">
      <public-header title="月收益高手" />
      <div v-for="(item,index) in monthList" :key="index" class="home_cencont_month">
        <div class="home_cencont_month_left">
          <div><img src="/images/tab_b.png" alt=""></div>
          <div>{{ item.monthname }}</div>
        </div>
        <div class="home_cencont_month_center">
          <div class="home_cencont_month_center_list">{{ item.moList }}</div>
          <div class="home_cencont_month_center_test">近一个月收益率</div>
        </div>
        <div class="home_cencont_month_right">
          <span>订阅</span>
        </div>

      </div>

    </div>
    <public-header title="猜你喜欢" />
    <div class="home_like">

      <div v-for="(item,index) in likeList" :key="index" class="home_like_content">
        <div class="home_like_content_top">
          <img src="/images/tab_a.png" alt="">
          <div class="home_like_content_top_name">
            {{ item.monthname }}
          </div>
        </div>
        <div class="home_like_content_center">
          <div class="home_like_content_center_list">{{ item.moList }}</div>
          <div class="home_like_content_center_text">年化收益</div>
        </div>
        <div class="home_like_content_bottom"><span>订阅</span></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAdvertisementOnLine, getBoardListSetList, getNrhBulletin } from '@/service/index.js'
import PublicHeader from '@/components/public-header/index.vue'
import ContentItem from '@/components/content-item/content-item.vue'
export default {
  name: 'Home',
  components: {
    PublicHeader

  },
  data () {
    return {
      totalProfitList: [
        {
          totalProfit: '99.5%',
          nickname: '张三',
          book: '订阅'
        },
        {
          totalProfit: '99.5%',
          nickname: '张二',
          book: '订阅'
        },
        {
          totalProfit: '99.5%',
          nickname: '张一',
          book: '订阅'
        }
      ], // 累计收益榜
      monthList: [
        {
          moList: '20%',
          monthname: 'moli'
        },
        {
          moList: '20%',
          monthname: 'molo'
        },
        {
          moList: '20%',
          monthname: 'moze'
        }
      ], // 月收益榜
      likeList: [
        {
          moList: '+120%',
          monthname: '天才'
        },
        {
          moList: '+199%',
          monthname: '股神'
        },
        {
          moList: '+188%',
          monthname: '卫冕之子'
        }
      ], // 月收益榜

      bannerList: [],
      messageList: [],
      tabsList: [
        // {
        //   imgUrl: "images/tab_a.png",
        //   name: "人气高手",
        //   desc: "实盘热度排行榜",
        // },
        // {
        //   imgUrl: "images/tab_a.png",
        //   name: "人气高手",
        //   desc: "人气高手",
        // },
        // {
        //   imgUrl: "images/tab_a.png",
        //   name: "人气高手",
        //   desc: "人气高手",
        // },
        // {
        //   imgUrl: "images/tab_a.png",
        //   name: "人气高手",
        //   desc: "人气高手",
        // },
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    /**
     *  初始化页面数据
     */
    init () {
      Promise.all([
        this.getAdvertisementOnLine(),
        this.getBoardListSetList(),
        this.getNrhBulletin()

      ])
        .then((res) => {
          console.log('res=', res)
          console.log('成功')
        })
        .catch((e) => {
          console.error('请求错误')
        })
    },
    /**
     * 获取tabs
     */
    async getBoardListSetList () {
      const params = {
        scope: 'INDEX'
      }
      const res = await getBoardListSetList(params)
      if (res.data.code === 0) {
        this.tabsList = this.changeTabs(res.data.data)
        return { name: 'klz' }
      }
    },
    changeTabs (list) {
      const result = []

      const itemA = list.filter(item => item.desc_name === '人气高手')[0]
      itemA.imgUrl = 'images/tab_a.png'
      result.push(itemA)

      const itemB = list.filter(item => item.desc_name === '周收益高手')[0]
      itemB.imgUrl = 'images/tab_b.png'
      result.push(itemB)

      const itemC = list.filter(item => item.desc_name === '日收益高手')[0]
      itemC.imgUrl = 'images/tab_c.png'
      result.push(itemC)

      const itemD = {
        desc_name: '炒股大赛',
        list_detail: '更多功能即将上线11',
        imgUrl: 'images/tab_d.png'
      }

      result.push(itemD)

      return result
    },
    /**
     * 轮播图
     */
    async getAdvertisementOnLine () {
      const res = await getAdvertisementOnLine()
      if (res && res.data.code === 0) {
        this.bannerList = res.data.data
        return res.data.data
      }
    },
    // 牛人快报
    async getNrhBulletin () {
      const res = await getNrhBulletin()
      if (res && res.data.code === 0) {
        this.messageList = res.data.data || []
        return res
      }
    }
  }
}
</script>

<style lang="scss">
.home {
  padding-bottom: 100px;
  &_banner {
    &_item {
      height: 150px;
      background: #000;
    }
  }
  &_tabs {
    height: 160px;
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; // 换行
    &_item {
      width: 144px;
      display: flex;
      flex-direction: row;
      align-items: center; // 该盒子的子元素垂直居中
      margin-bottom: 20px;
      &_right {
        &_name {
          font-size: 15px;
          font-weight: 400;
          color: #222222;
          line-height: 21px;
        }
        &_desc {
          font-size: 12px;
          font-weight: 400;
          color: #888888;
          line-height: 17px;
          margin-top: 3px;
        }
      }
    }
    &_item:nth-of-type(2n + 1) {
      // 选择器
      margin-right: 45px;
    }
    &_img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
  }
  &_news{
    display: flex;
    flex-direction: row;
    height: 50px ;
    background-color: #fff;
    &_swipe{
      flex: 1;
      height: 50px ;
    }
    .van-swipe-item{
      display: flex;
      align-items: center;
      height: 50px!important;
    }
    &_left{
      margin-top: 17px;
      margin-right: 16px;
      margin-left: 15px;
      position: relative;
      &_img{
        width: 68px;
        height: 17px;
      }

    }
  }
  &_conpontion{

    &_item{
      border: 1px solid #000;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 76px;
      padding: 0 15px;
      box-sizing: border-box;
      align-items: center;
      &_left{
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        color: #222222;
        &_avatar{
          height: 46px;
          width: 46px;
          background:red;
          border-radius: 23px;
          margin-right: 10px;
        }
      }
      &_center{
        &_total{
          font-size: 16px;
          font-weight: 500;
          color: #FD4D5A;
        }
      }
    }
  }
  &_cencont{
    &_month{
      height: 76px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 15px;
      margin-bottom: 10px;
      box-sizing: border-box;
      align-items: center;
      &_left{
        align-items: center;
        display: flex;
        flex-direction: row;
        font-size: 14px;
        color: #222222;
        margin-right: 15px;
        img{
          height: 46px;
          width: 46px;
          margin-right: 10px;
        }
      }
      &_center{
        display: flex;
        flex-direction: column;
        align-items: center;
        &_list{
          font-size: 16px;
          color: #FD4D5A;
        }
        &_test{
          font-size: 12px;
          color: #888888;
        }
      }
      &_right{
        width: 58px;
        height: 28px;
        background: #3B7BE6;
        border-radius: 3px;
        text-align: center;
        span{
          font-size: 14px;
          color: #FFFFFF;
          line-height: 28px;
        }
      }
    }
  }
  &_like{
    // width: 100%;
    // padding:15px 15px 20px;
    overflow-x: scroll;
    -webkit-overflow-scrolling : touch;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    background-color: #fff;
    &_content{
      text-align: center;
      margin-right: 10px;
      // -webkit-flex:1 0 auto;
      flex:1 0 auto;
      // flex-grow: ;
      // flex-basis: ;
      // flex-shrink: ;
      box-sizing: border-box;

      // width: 144px;
      // height: 140px;
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;
      &_top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        img{
          width: 50px;
          height: 42px;
        }
        &_name{
          height: 20px;
          font-size: 14px;
          color: #222222;
          line-height: 20px;
        }
      }
      &_center{
        margin-top: 5px;
        display: flex;
        flex-direction: row;
        height: 20px;
        &_list{
          font-size: 14px;
          color: #FD4D5A;
        }
        &_text{
          font-size: 12px;
          color: #888888;
          line-height: 20px;
        }
      }
      &_bottom{
        width: 140px;
        height: 28px;
        background: #3B7BE6;
        text-align: center;
        span{
          width: 28px;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 28px;
        }
      }
    }

  }
}
</style>

